import React, { Component, useRef, useState } from 'react'
import { SearchOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons';
import {
    Form,
    Input,
    Affix,
    Space,
    Button,
    DatePicker,
    Tabs,
    Select,
    Steps,
    Modal,
    notification,
    Row,
    Col,
    List,
    Tag,
    Tooltip
} from 'antd'
import _ from 'lodash'
import axios from 'axios';
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import TheImage from '@/components/TheImage'
import ThePagination from '@/components/ThePagination'
import Logistics from './components/logistics'
import TheDialog from '@/components/TheDialog'
import SendGoods from './components/sendGoods'
import {
    apiShopOrderInfoPage,
    apiExpressageList,
    apiExportLibraryOutReport,
    apiDeliverymanPage,
    apiShopOrderDetail,
    apiOrderNoticeStatistic,
    apiOrderNoticeDel,
    apiPostMergeOrderDetail,
    apiMallOrderExportCapitalDaily,
    apiMallOrderExportOrderDetail,
    apiGetShopOrderInfoPage,
    apiGetShopOrderInfoList
} from '@/request/orderManagement'
import { getDateTime3, getDateTime2 } from '@/utils/getDate'
import { exportTable, exportSheetTable } from '@/utils/exportTable.js'
import { mergePrints, toPrintTool, printQrCode } from '@/utils/toPrint.js'
import { apiIdentificationCodeAdd } from '@/request/common'

import store from "@/store/store"
import moment from 'moment'
import './style/style.less'
import { Link } from 'react-router-dom';

const { RangePicker } = DatePicker
const { TabPane } = Tabs
const { Step } = Steps
const { confirm } = Modal
const SearchHeader = ({ getValue, educeTable, orderState, capitalTable }) => {
    const formRef = useRef()
    const searchValue = store.getState().searchValue || {}
    const [orderCode, setOrderCode] = useState(searchValue.orderCode)
    const onFinish = (values) => {
        if (values.time && values.time.length) {
            values.createTimeStart = getDateTime3(values.time[0]) + ' 00:00:00'
            values.createTimeEnd = getDateTime3(values.time[1]) + ' 23:59:59'
        }
        delete (values.time)
        _.forIn(values, (v, k) => {
            if (!v) {
                delete (values[k])
            }
        })
        getValue(values)
    }
    const reset = () => {
        formRef.current.setFieldsValue({
            orderCode: '',
            activityTypeCode: null,
            time: []
        })
        getValue({})
    }

    const tableExport = () => {
        educeTable({ type: 'orderList', option: formRef.current.getFieldValue() })
    }
    const saleOutExport = () => {
        educeTable({ type: 'saleOut', option: formRef.current.getFieldValue() })

    }
    const changeParams = (e, key) => {
        setOrderCode(e.target.value)
    }
    const onlineExportCapitalDaily = () => {
        capitalTable({ type: 'onlineExportCapital', option: formRef.current.getFieldValue() })
    }
    const onlineExportOrderDetail = () => {

        capitalTable({ type: 'onlineExportOrder', option: formRef.current.getFieldValue() })
    }

    return (
        <Form ref={formRef} onFinish={onFinish} layout="inline" style={{ width: '100%' }}>
            <Form.Item name="orderCode" style={{ marginRight: 8 }}>
                <Input placeholder='请输入订单号' defaultValue={orderCode}
                    onChange={(e) => changeParams(e, 'orderCode')} suffix={<SearchOutlined />} />
            </Form.Item>
            <Form.Item name="activityTypeCode" style={{ marginRight: 8 }}>
                <Select allowClear options={[
                    {
                        value: '0',
                        label: '普通订单'
                    },
                    {
                        value: '1',
                        label: '砍价订单'
                    },
                    {
                        value: '2',
                        label: '拼团订单'
                    },
                    {
                        value: '3',
                        label: '奖品订单'
                    }
                ]} placeholder={"请选择订单类型"} style={{ width: "160px" }} />
            </Form.Item>
            <Form.Item name="time" label="下单时间" style={{ marginRight: 8 }}>
                <RangePicker format={'YYYY/MM/DD'}
                    defaultValue={searchValue.hasOwnProperty('createTimeStart') ? [moment(searchValue.createTimeStart, 'YYYY/MM/DD'), moment(searchValue.createTimeEnd, 'YYYY/MM/DD')] : []} />
            </Form.Item>
            <Form.Item style={{ marginRight: 8 }}>
                <Space>
                    <Button htmlType="submit" type="primary">搜索</Button>
                    <Button onClick={reset}>重置</Button>
                </Space>
            </Form.Item>
            <Form.Item style={{ marginRight: 8 }}>
                <Space>
                    {
                        orderState == 4 ?
                            <TheButton style={{ fontSize: 12 }} hasPermi={['order:mallOrder:exportOrder']} size="middle"
                                type="default"
                                onClick={tableExport}>订单导出</TheButton> : null
                    }
                </Space>
            </Form.Item>
            <Form.Item style={{ marginRight: 8 }}>
                <Space>
                    {
                        orderState == 4 ?
                            <TheButton style={{ fontSize: 12 }} hasPermi={['order:mallOrder:exportDaily']} size="middle"
                                type="default"
                                onClick={onlineExportCapitalDaily}>导出资金日报</TheButton> : null
                    }
                </Space>
            </Form.Item>
            <Form.Item style={{ marginRight: 8 }}>
                <Space>
                    {
                        orderState == 4 ?
                            <TheButton style={{ fontSize: 12 }} hasPermi={['order:mallOrder:exportDailyOrder']}
                                size="middle" type="default"
                                onClick={onlineExportOrderDetail}>导出资金日报订单</TheButton> : null
                    }
                </Space>
            </Form.Item>
            <Form.Item style={{ marginRight: 8 }}>
                <Space>
                    {
                        orderState == 4 ?
                            <TheButton style={{ fontSize: 12 }} hasPermi={['order:mallOrder:exportSales']} size="middle"
                                type="default"
                                onClick={saleOutExport}>销售出库单导出</TheButton> : null
                    }
                </Space>
            </Form.Item>
        </Form>
    );
};

export default class MallOrder extends Component {
    constructor() {
        super()
        this.mergeformRef = React.createRef()
        this.logisticsRef = React.createRef()
        this.sendGoodsRef = React.createRef()

        this.state = {
            noticeTimer: null,
            columns: [
                {
                    title: '订单编号',
                    dataIndex: 'orderCode',
                    key: 'orderCode',
                    render: (text, record) => {
                        return <span>
                            {text}&nbsp;&nbsp;&nbsp;
                            {record.otherDelivery === 1 ? <Tag color="red">代发货</Tag> : ''}
                        </span>
                    },
                },
                {
                    title: '订单标记',
                    dataIndex: 'colorLevel',
                    key: 'colorLevel',
                    render: (text, record) => {
                        if (text && record.colorLevelRemark) {
                            return <Tooltip title={record.colorLevelRemark}>
                                <div style={{
                                    width: "25px",
                                    height: "25px",
                                    lineHeight: "25px",
                                    margin: "auto",
                                    backgroundColor: text,
                                    borderRadius: "20px",
                                }}>
                                    备
                                </div>
                            </Tooltip>
                        }
                    }
                },
                {
                    title: '买家昵称',
                    dataIndex: 'buyMemberName',
                    key: 'buyMemberName'
                },
                {
                    title: '收货人',
                    dataIndex: 'memberName',
                    key: 'memberName'
                },
                {
                    title: '联系方式',
                    dataIndex: 'memberPhone',
                    key: 'memberPhone'
                },
                {
                    title: '自配送单号',
                    dataIndex: 'deliveryCode',
                    key: 'deliveryCode'
                },
                {
                    title: '收货地址',
                    dataIndex: 'memberAddress',
                    key: 'memberAddress'
                },
                {
                    title: '订单类型',
                    dataIndex: 'activityTypeCode',
                    key: 'activityTypeCode',
                    render: (text) => {
                        let label = ""
                        switch (parseInt(text)) {
                            case 0:
                                label = "普通订单";
                                break;
                            case 1:
                                label = "砍价订单";
                                break;
                            case 2:
                                label = "拼团订单";
                                break;
                            case 3:
                                label = "奖品订单";
                                break;
                            default:
                                break;
                        }
                        return label;
                    }
                },
                {
                    title: '订单金额（元）',
                    dataIndex: 'orderTotalPrice',
                    key: 'orderTotalPrice',
                    render: (text) => {
                        return <React.$Price price={text} />
                    }
                },
                // {
                //   title: "优惠券名称",
                //   dataIndex: "couponTitle",
                //   key: "couponTitle",
                //   render: (text, render) => {
                //     return render.couponTitle ? render.couponTitle : "-"
                //   }
                // },
                {
                    title: "优惠金额",
                    dataIndex: "discountStr",
                    key: "discountStr",
                    render: (text, render) => {
                        return render.discountStr ? render.discountStr : "-"
                    }
                },
                {
                    title: "优惠券金额",
                    dataIndex: "couponTotal",
                    key: "couponTotal",
                    render: (text, render) => {
                        return !render.couponTotal ? <React.$Price price={0} /> :
                            <React.$Price price={render.couponTotal} />
                    }
                },
                {
                    title: "平台优惠金额",
                    dataIndex: "fullDecrementAmount",
                    key: "fullDecrementAmount",
                    render: (text, render) => {
                        // console.log(render, 'asd')

                        return !render.fullDecrementAmount ? <React.$Price price={0} /> :
                            <React.$Price price={render.fullDecrementAmount} />
                    }
                },
                {
                    title: '实付金额（元）',
                    dataIndex: 'orderPayPrice',
                    key: 'orderPayPrice',
                    render: (text) => {
                        return <React.$Price price={text} />
                    }
                },
                {
                    title: '支付方式',
                    dataIndex: 'payWay',
                    key: 'payWay',
                    render: (text) => {
                        let label = ""
                        switch (text) {
                            case "WeChat":
                                label = "微信";
                                break;
                            case "Alipay":
                                label = "支付宝";
                                break;
                            case "YsPay":
                                label = "银行卡";
                                break;
                        }
                        return label;
                    }
                },
                {
                    title: '订单时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                },
                {
                    title: '订单状态',
                    dataIndex: 'orderState',
                    key: 'orderState',
                    render: (text) => {
                        let label = ""
                        switch (parseInt(text)) {
                            case 3:
                                label = "待付款";
                                break;
                            case 6:
                                label = "待分享";
                                break;
                            case 4:
                                label = "待发货";
                                break;
                            case 5:
                                label = "待收货";
                                break;
                            case 9:
                                label = "交易成功";
                                break;
                            case 0:
                                label = "交易关闭";
                                break;
                        }
                        return label;
                    }
                },
                {
                    title: '是否有退款',
                    dataIndex: 'isHasRefund',
                    key: 'isHasRefund',
                    render: (text, record) => {
                        if (typeof record !== 'object') return '否'
                        let flag = record.orderDetailList.filter(item => !['4', '0', null].includes(item.salesStatus))
                        return flag.length > 0 ? <div style={{ color: '#2f2fff', cursor: 'pointer' }}
                            onClick={() => this.viewRefund(record)}>是</div> : <div>否</div>
                    }
                },
                // {
                //     title: '测试用-包裹类型',
                //     dataIndex: 'outLibraryCount',
                //     key: 'outLibraryCount',
                //     render: (text, record) => {
                //         return text > 1 ? '多' : '单'
                //     }
                // },
                // {
                //     title: '测试用-快递类型',
                //     dataIndex: 'deliveryCode',
                //     key: 'deliveryCode',
                //     render: (text, record) => {
                //         if (record.outLibraryCount > 1){
                //             return '混合'
                //         }
                //         return text ? "自配送" : "快递"
                //     }
                // },
                {
                    title: '操作',
                    fixed: 'right',
                    render: (text, record) => {
                        // console.log(record)
                        // isMultiPackage是否为多包裹 true：多包裹 false: 单包裹
                        let isMultiPackage = record.outLibraryCount > 1;
                        let btns = [];
                        let b1 = <TheButton hasPermi={['order:mallOrder:reassign']}
                            onClick={() => this.reassignDeliverymanDialog(record, isMultiPackage)}>{isMultiPackage ? "修改快递" : (record.deliveryCode ? "修改配送员" : "修改快递")}</TheButton>
                        let b2 = <TheButton hasPermi={['order:mallOrder:view']}
                            onClick={() => this.props.history.push(`/order/mallOrder/details/${record.shopOrderId}/normal`)}>查看订单</TheButton>
                        let b3 = <TheButton hasPermi={['order:mallOrder:logisticsView']}
                            onClick={() => this.onLogistics(record, isMultiPackage)}>查看物流</TheButton>
                        let b4 = <TheButton hasPermi={['order:mallOrder:send']}
                            onClick={() => this.openDialog(record.shopOrderId, isMultiPackage, record.oneOutLibraryCode)}>{record.otherDelivery == 1 ? '代发货' : '发货'}</TheButton>
                        let b5 = <TheButton hasPermi={['order:mallOrder:mergesend']} onClick={() => this.mergeDialog({
                            memberId: record.memberId,
                            buyMemberName: record.buyMemberName,
                            memberName: record.memberName,
                            memberPhone: record.memberPhone,
                            memberAddress: record.memberAddress
                        })}>合并发货</TheButton>
                        if (isMultiPackage) {
                            // 待收货状态
                            if (parseInt(record.orderState) === 5) {
                                btns.push(b1)
                            }
                            btns.push(b2)
                            // 待收货状态&订单数为1
                            // if (parseInt(record.orderState) === 5 && record.orderCount === 1) {
                            //     btns.push(b3)
                            // }
                            // 待发货&
                            if (parseInt(record.orderState) === 4 && record.salesReturnStatus === 1) {
                                btns.push('退款中')
                            }
                            // 待发货&
                            if (parseInt(record.orderState) === 4 && record.salesReturnStatus !== 1) {
                                btns.push(b4)
                            }
                            if (parseInt(record.orderState) === 5 && record.deliverCount > 0) {
                                btns.push(b4)
                            }
                            return btns
                        } else {
                            // 待收货状态
                            if (parseInt(record.orderState) === 5) {
                                // 委外仓的单包裹订单，隐藏按钮，0否1是
                                if (!record.isOutsourceShipments) {
                                    btns.push(b1)
                                }
                            }
                            btns.push(b2)
                            // 待收货状态&订单数为1
                            if (parseInt(record.orderState) === 5 && record.orderCount === 1) {
                                btns.push(b3)
                            }
                            // 待发货&
                            if (parseInt(record.orderState) === 4 && record.salesReturnStatus === 1) {
                                btns.push('退款中')
                            }
                            // 待发货&
                            if (parseInt(record.orderState) === 4 && record.salesReturnStatus !== 1) {
                                // 委外仓的单包裹订单，隐藏发货按钮，0否1是
                                if (!record.isOutsourceShipments) {
                                    btns.push(b4)
                                }
                            }
                            // 待发货&
                            if (parseInt(record.orderState) === 4 && record.salesReturnStatus !== 1 && record.otherDelivery !== 1) {
                                // 委外仓的单包裹订单，隐藏按钮，0否1是
                                if (!record.isOutsourceShipments) {
                                    btns.push(b5)
                                }
                            }
                            return btns
                            // return <>
                            //   {
                            //       parseInt(record.orderState) === 5 &&
                            //       <TheButton hasPermi={['order:mallOrder:reassign']}
                            //                  onClick={() => this.reassignDeliverymanDialog(record.shopOrderId,record.deliveryCode)}>{record.deliveryCode ? "修改配送员" : "修改快递"}</TheButton>
                            //   }
                            //   <TheButton hasPermi={['order:mallOrder:view']}
                            //              onClick={() => this.props.history.push(`/order/mallOrder/details/${record.shopOrderId}/normal`)}>查看订单</TheButton>
                            //   {
                            //       (parseInt(record.orderState) === 5 && record.orderCount === 1) &&
                            //       <TheButton hasPermi={['order:mallOrder:logisticsView']}
                            //                  onClick={() => this.onLogistics(record)}>查看物流</TheButton>}
                            //   {
                            //       parseInt(record.orderState) === 4 && record.salesReturnStatus === 1 && '退款中'
                            //   }
                            //   {
                            //       parseInt(record.orderState) === 4 && record.salesReturnStatus !== 1 &&
                            //       <TheButton hasPermi={['order:mallOrder:send']}
                            //                  onClick={() => this.openDialog(record.shopOrderId)}>
                            //         {
                            //           record.otherDelivery == 1 ? '代发货' : '发货'
                            //         }
                            //       </TheButton>
                            //   }
                            //   {
                            //       parseInt(record.orderState) === 4 && record.salesReturnStatus !== 1 && record.otherDelivery != 1 &&
                            //       <TheButton hasPermi={['order:mallOrder:mergesend']} onClick={() => this.mergeDialog({
                            //         memberId: record.memberId,
                            //         buyMemberName: record.buyMemberName,
                            //         memberName: record.memberName,
                            //         memberPhone: record.memberPhone,
                            //         memberAddress: record.memberAddress
                            //       })}>合并发货</TheButton>
                            //   }
                            // </>
                        }
                    }
                }
            ],
            dataSource: [1],
            tabData: [
                {
                    key: '',
                    tab: '全部'
                },
                {
                    key: '3',
                    tab: '待付款'
                },
                {
                    key: '6',
                    tab: '待分享'
                },
                {
                    key: '4',
                    tab: '待发货'
                },
                {
                    key: '5',
                    tab: '待收货'
                },
                {
                    key: '9',
                    tab: '交易成功'
                },
                {
                    key: '0',
                    tab: '交易关闭'
                },
            ],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            pageData3: {
                pageNo: 1,
                pageSize: 10
            },
            pageData4: {
                pageNo: 1,
                pageSize: 10
            },
            pageData5: {
                pageNo: 1,
                pageSize: 10
            },
            pageData6: {
                pageNo: 1,
                pageSize: 10
            },
            pageData9: {
                pageNo: 1,
                pageSize: 10
            },
            pageData0: {
                pageNo: 1,
                pageSize: 10
            },
            total3: 0,
            total4: 0,
            total5: 0,
            total6: 0,
            total9: 0,
            total0: 0,
            searchValue: {},
            orderState: '',
            loading: false,
            options: [],
            courierOptions: [],
            isModalVisible: false,
            voiceOn: false,
            viewLoading: false,
            mergeColumns: [
                {
                    title: '订单时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                },
                {
                    title: '订单编号',
                    dataIndex: 'orderCode',
                    key: 'orderCode',
                    render: (text, record) => {
                        return <TheButton onClick={() => this.shopModal(record.shopOrderId)}>{text}</TheButton>
                    }
                },
                {
                    title: '订单金额（元）',
                    dataIndex: 'orderTotalPrice',
                    key: 'orderTotalPrice',
                    render: (text) => {
                        return <React.$Price price={text} />
                    }
                },
                {
                    title: '实付金额（元）',
                    dataIndex: 'orderPayPrice',
                    key: 'orderPayPrice',
                    render: (text) => {
                        return <React.$Price price={text} />
                    }
                },
                // {
                //   title: '商品图片',
                //   dataIndex: 'goodsImage',
                //   key: 'goodsImage',
                //   render: (text, record) => {
                //     return <TheImage src={record.orderDetailList[0].goodsImage} width={80} height={80} />
                //   }
                // },
                // {
                //   title: '商品名称',
                //   dataIndex: 'goodsName',
                //   key: 'goodsName',
                //   render: (text, record) => {
                //     return record.orderDetailList[0].goodsName
                //   }
                // },
                // {
                //   title: '物料ID',
                //   dataIndex: 'materialId',
                //   key: 'materialId',
                //   render: (text, record) => {
                //     return record.orderDetailList[0].materialId
                //   }
                // },
                // {
                //   title: '单价（元）',
                //   dataIndex: 'orderPrice',
                //   key: 'orderPrice',
                //   render: (text, record) => {
                //     return <React.$Price price={record.orderDetailList[0].orderPrice} />
                //   }
                // },
                // {
                //   title: '数量',
                //   dataIndex: 'orderDetailList',
                //   key: 'orderDetailList',
                //   render: (text, record) => {
                //     return record.orderDetailList[0].orderProductCount
                //   }
                // },
                // {
                //   title: '总计（元）',
                //   dataIndex: 'orderPriceTotal',
                //   key: 'orderPriceTotal',
                //   render: (text, record) => {
                //     return <React.$Price price={record.orderDetailList[0].orderPriceTotal} />
                //   }
                // },
            ],
            mergeOrderDataSource: [],
            mergeVisible: false,
            mergeOrder: "",
            orderList: [],
            OrderVisible: false,
            selectedRows: [],
            selectedRowKeys: [],
            orderDetails: [],
            off: "0",
            printLoading: false
        }
    }

    audioRef = React.createRef()
    searchRef = React.createRef()

    componentWillUnmount() {
        clearInterval(this.state.noticeTimer)
        this.setState({
            noticeTimer: null
        })
    }

    componentDidMount() {

        let searchParams = store.getState().searchValue
        if (searchParams) {
            let { pageNo, pageSize, orderState, searchValue } = searchParams
            this.setState({
                searchValue: {
                    ...searchParams
                },
                orderState: orderState ? orderState : '',
                [`pageData${orderState}`]: {
                    pageNo: pageNo, pageSize: pageSize
                }
            }, () => {
                this.getData()
            })
        } else {
            this.getData()
        }
        this.getExpressage()
        this.getCourierOptions()
    }

    reassignDeliverymanDialog = async (values, type) => {
        if (type) {
            this.sendGoodsRef.current.open(values.shopOrderId, 'courier', values.orderState)
        } else {
            this.sendGoodsRef.current.send(values.shopOrderId, values.oneOutLibraryCode)
        }
    }

    // 查看退款详情
    viewRefund(row) {
        this.props.history.push({
            pathname: '/order/mallChargeback', query: {
                orderCode: row.orderCode
            }
        })

    }

    //
    shopModal = (orderId) => {
        window.open().location.href = window.location.origin + window.location.pathname + `#/order/mallOrder/details/${orderId}/normal`
        // const hrefStr = window.location.href;
        // // 获取相对路径
        // const urlParams = new URL(hrefStr);
        // const pathname = urlParams?.origin;
        // // 获取根路径
        // const rootPath=hrefStr.replace(pathname,'');
        // console.log(`${rootPath}/test/markdown/001`);
        // 在新标签页面打开绝对路径
        // window.open(`${rootPath}/test/markdown/001`, '_blank');
    }
    orderCloseDialog = () => {
        this.setState({
            OrderVisible: false
        })
    }

    audioControl(type) {
        let message = '哈奇马商城订单待处理'
        let url = "https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&vol=9&rate=32&per=0&tex=" + encodeURI(message);
        // baidu文字转语音
        var voiceContent = new Audio(url);
        voiceContent.src = url;
        voiceContent.play()
    }

    getExpressage = async () => {
        let res = await apiExpressageList()
        if (res.code === 0 && res.data) {
            let options = res.data.map(v => {
                return {
                    value: v.expressageCompanyCode,
                    label: v.expressageCompanyName
                }
            })
            this.setState({ options })
        }
    }
    // 配送员列表
    getCourierOptions = async () => {
        let res = await apiDeliverymanPage({ pageNo: 1, pageSize: "-1" })
        if (res.code === 0 && res.data) {
            let courierOptions = []
            res.data.map(v => {
                if (v.hasBoundCar) {
                    courierOptions.push({
                        value: v.deliverymanId,
                        label: v.name
                    })
                }
            })
            this.setState({ courierOptions })
        }
    }

    // 按类型获取当前新订单统计
    async getOrderStatistic() {
        let res = await apiOrderNoticeStatistic({ type: 2 })
        if (res.code === 0 && res.data > 0 && this.state.voiceOn) {
            // 消息提示框
            const key = `notification`;
            notification.close('notification')
            const btn = (
                <div>
                    <Button type="primary" size="small" style={{ marginRight: 20 }}
                        onClick={() => this.notificationSubmit()}>
                        立即处理
                    </Button>
                    <Button size="small" type="dashed" danger ghost onClick={() => this.close()}>
                        延后处理
                    </Button>
                </div>
            );
            notification.info({
                message: '新订单提醒',
                description:
                    '哈奇马商城订单待处理！',
                btn,
                key,

            });
            this.audioControl()
        }
    }

    close = () => {
        notification.close('notification')
    };
    notificationSubmit = async () => {

        let res = await apiOrderNoticeDel({ type: 2 })
        if (res.code == 0) {
            this.setState({
                pageData4: {
                    pageNo: 1,
                    pageSize: 10
                },
            }, () => this.getData())
            notification.close('notification')
        }
    };
    getData = async () => {

        this.setState({ loading: true })
        const { searchValue, orderState } = this.state
        let params = {
            ...searchValue, ...this.state[`pageData${orderState}`], orderState
        }
        store.dispatch({
            type: 'SaveSearchValues',
            data: {
                ...params
            }
        })
        let res = await apiGetShopOrderInfoPage({ ...params })

        if (res.code === 0 && res.data) {
            this.setState({
                dataSource: res.data,
                [`pageData${orderState}`]: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                [`total${orderState}`]: res.totalCount
            })
        }
        this.setState({ loading: false })
    }
    pageChange = (pageNo, pageSize) => {

        const { orderState } = this.state
        this.setState({
            [`pageData${orderState}`]: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    }
    getValue = value => {
        const { orderState } = this.state
        this.setState({
            [`pageData${orderState}`]: {
                pageNo: 1,
                pageSize: 10
            },
            searchValue: value
        }, () => {
            this.getData()
        })
    }
    changeKey = key => {
        this.setState({
            orderState: key
        }, () => {
            this.getData()
            if (key != 4) {
                clearInterval(this.state.noticeTimer)
                this.setState({
                    noticeTimer: null,
                    voiceOn: false
                })
            }
        })
    }
    openDialog = async (orderId, type, code) => {
        if (type) {
            this.sendGoodsRef.current.open(orderId, 'send')
        } else {
            this.sendGoodsRef.current.send(orderId, code)
        }
    }
    mergeDialog = async (values) => {
        // console.log(values)
        let params = {
            memberName: values.memberName,
            memberPhone: values.memberPhone,
            memberAddress: values.memberAddress
        }
        let res = await React.$post("/management/shopOrderInfo/getCutOrderList", params)
        if (res.code === 0) {
            // console.log(_.flattenDeep(res.data));
            res.data = res.data.filter(item => item.otherDelivery != 1)
            this.setState({
                mergeVisible: true,
                mergeOrder: values,
                mergeOrderDataSource: _.flattenDeep(res.data),
            })
        }
    }
    mergeCloseDialog = () => {
        this.setState({
            mergeVisible: false,
            mergeOrder: "",
            mergeOrderDataSource: [],
            orderList: [],
            selectedRows: [],
            selectedRowKeys: []
        })
    }
    mergeSaveDialog = () => {
        if (this.state.orderList.length === 0) {
            React.$message({
                type: "warning",
                content: '请选择要发货的订单'
            })
        } else {
            this.mergeformRef.current.validateFields().then(async (err) => {
                if (err) {
                    // console.log(this.mergeformRef.current.getFieldsValue());
                    let params = {
                        orderIds: this.state.orderList.join(','),
                        ...err,
                    }
                    // console.log(params);
                    let res = await React.$post("/management/shopOrderInfo/sendMergeOrders", params)
                    if (res.code === 0) {
                        React.$message({
                            type: "info",
                            content: '合并发货成功'
                        })
                        this.mergeCloseDialog()
                        this.getData()
                    }
                }
            })
        }
    }
    onChange = (selectedRowKeys, selectedRows) => {
        // console.log(selectedRowKeys, selectedRows);
        this.setState({
            selectedRows: selectedRows,
            selectedRowKeys: selectedRowKeys
        }, () => {
            let rows = this.state.selectedRows.length
            let orders = []
            let ordercheck = []
            for (let i = 0; i < rows; i++) {
                orders.push(selectedRows[i].shopOrderId)
                ordercheck.push(selectedRows[i].orderCode)
            }
            this.setState({
                orderList: orders
            })
        })
    }
    CancelChange = (orderId, Rows) => {
        let { selectedRowKeys, selectedRows } = this.state
        selectedRowKeys = selectedRowKeys.filter(item => item != orderId)
        selectedRows = selectedRows.filter(item => item != Rows)
        // console.log(selectedRowKeys, selectedRows);
        this.onChange(selectedRowKeys, selectedRows)
    }


    onLogistics = async (value, type) => {
        if (type) {
            this.sendGoodsRef.current.open(value.shopOrderId, 'courier', value.orderState)
        } else {
            if (value.deliveryCode) {
                this.props.history.push(`/order/mallOrder/details/${value.shopOrderId}/normal`)
            } else {
                this.logisticsRef.current.onLogistics(value.shopOrderId, value.oneOutLibraryCode)
            }
        }
    }

    getOrderStateTxt = (e, m) => {
        let txt = ''
        switch (e) {
            case '3':
                txt = '待付款'
                break;
            case '6':
                txt = '待分享'
                break;
            case '4':
                if (m === "9") {
                    txt = '退款'
                } else {
                    txt = '待发货'
                }

                break;
            case '5':
                txt = '待收货'
                break;
            case '9':
                txt = '交易成功'
                break;
            case '0':
                txt = '交易关闭'
                break;
            default:
                break;
        }
        return txt
    }
    getOrderStateColor = (e, m) => {
        let txt = ''
        switch (e) {
            case '3': //待付款
                txt = '#FFFFFF'
                break;
            case '4': //待发货
                if (m === 1) {
                    txt = '#fed8e1'
                } else {
                    txt = '#FFFFFF'
                }
                break;
            case '5': //待收货
                txt = '#CCE8CF'
                break;
            case '6': //待分享
                txt = '#CCE8CF'
                break;
            case '9': //交易成功
                txt = '#CCE8CF'
                break;
            case '0': //交易关闭
                txt = '#fed8e1'
                break;
            default:
                break;
        }
        return txt
    }
    educeTable = async (e) => {
        // 导出待发货订单
        const { type, option } = e
        if (type === 'orderList') {
            let th_arr = [{ prop: 'orderCode', title: '订单编号' },
            { prop: 'createTime', title: '订单时间' },
            { prop: 'memberId', title: '用户id' },
            { prop: 'colorLevelRemark', title: '订单备注' },
            { prop: 'buyMemberName', title: '买家昵称' },
            { prop: 'goodsName', title: '商品名称' },
            { prop: 'skuAttribute', title: '规格' },
            { prop: 'orderCount', title: '商品数量', valueType: 'number' },
            { prop: 'materialId', title: '物料id' },
            { prop: 'orderRemark', title: '用户备注' },
            { prop: 'memberName', title: '收货人' },
            { prop: 'memberPhone', title: '联系方式' },
            { prop: 'memberAddress', title: '收货地址' }]
            const { searchValue, orderState } = this.state
            let res = await apiGetShopOrderInfoList({
                orderState: 4,
                createTimeEnd: (option.hasOwnProperty('time') && option.time.length > 0) ? getDateTime3(option.time[1]) + ' 23:59:59' : '',
                createTimeStart: (option.hasOwnProperty('time') && option.time.length > 0) ? getDateTime3(option.time[0]) + ' 00:00:00' : '',
                ...option
            })

            if (res.code === 0 && res.data) {
                let tb_arr = []
                res.data.forEach(item => {
                    if (item.hasOwnProperty('orderDetailList') && item.orderDetailList.length > 0) {
                        item.orderDetailList.forEach(item2 => {
                            // if (!['4', '0', null].includes(item2.salesStatus)) {
                            //   return
                            // }
                            let goodsSkuJson = item2.hasOwnProperty('goodsSkuJson') && item2.goodsSkuJson ? JSON.parse(item2.goodsSkuJson) : ''
                            tb_arr.push({
                                orderCode: item.orderCode,
                                createTime: item.createTime,
                                memberId: item.memberId,
                                colorLevelRemark: item.colorLevelRemark,
                                buyMemberName: item.buyMemberName,
                                skuAttribute: goodsSkuJson ? goodsSkuJson.skuAttribute.map(sku => `${sku.key}:${sku.value}`).join(';') : '',
                                goodsName: item2.goodsName,
                                orderCount: item2.orderProductCount,
                                materialId: item2.materialId,
                                orderRemark: item.orderRemark,
                                memberName: item.memberName,
                                memberPhone: item.memberPhone,
                                memberAddress: item.memberAddress,
                            })
                        })
                    }
                })
                exportSheetTable({
                    fileName: '待发货订单（商城订单）',
                    tH_data: th_arr,
                    tB_data: tb_arr,
                    isSheet: true,
                    merge: true,
                    mergeProp: [{ key: 'orderCode' }]
                })
            }
        } else if (type === 'saleOut') {
            let res = await apiExportLibraryOutReport({
                createTimeEnd: (option.hasOwnProperty('time') && option.time.length > 0) ? getDateTime3(option.time[1]) + ' 23:59:59' : '',
                createTimeStart: (option.hasOwnProperty('time') && option.time.length > 0) ? getDateTime3(option.time[0]) + ' 00:00:00' : '',
                orderCode: (option.hasOwnProperty('orderCode') && option.orderCode) ? option.orderCode : ''
            })

            if (res.code === 0 && res.data) {
                let th_arr = [

                    {
                        title: '日期',
                        prop: 'day'
                    },
                    {
                        title: '序号',
                        prop: 'productId'
                    },
                    {
                        title: '物料Id',
                        prop: 'materialId',
                    },
                    {
                        title: '库存单位',
                        prop: 'unit'
                    },
                    {
                        title: '实发数量',
                        prop: 'orderProductCount', valueType: 'number'
                    },
                    {
                        title: '含税单价',
                        prop: 'orderPrice', valueType: 'number'
                    }
                ]
                const tb_arr = res.data
                exportSheetTable({
                    fileName: '销售出库单（商城订单）',
                    tH_data: th_arr,
                    tB_data: tb_arr,
                    isSheet: true,
                    merge: false,
                    mergeProp: []
                })
            }
        }

    }
    //资金日报，资金日报订单
    capitalTable = async (e) => {
        // 导出待发货订单
        const { type, option } = e
        const { searchValue, } = this.state
        let condition = ""
        if (searchValue.createTimeStart && searchValue.createTimeEnd) {
            condition = searchValue
        } else {
            let now = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
            // console.log(now);
            let MonthDate = new Date();
            MonthDate.setDate(1); //set设置时间
            MonthDate.setHours(0);
            MonthDate.setSeconds(0);
            MonthDate.setMinutes(0);
            let firstMonth = moment(MonthDate.getTime()).format("YYYY-MM-DD HH:mm:ss")
            condition = {
                createTimeStart: firstMonth,
                createTimeEnd: now
            }
        }
        if (type === 'onlineExportCapital') {
            let res = await apiMallOrderExportCapitalDaily({ ...condition })
            if (res.code === 0 && res.data) {
                // console.log(res.data.data);
                // console.log(res.data.payWay);
                let th_arr = [
                    {
                        title: '日期',
                        prop: 'days'
                    },
                    {
                        title: '付款方式',
                        prop: '',
                        children: res.data.payWay.map(item => {
                            return {
                                title: item.name,
                                prop: item.value,
                                valueType: 'number'
                            }
                        })
                    },
                    {
                        title: '商品收入',
                        prop: 'incomePrice', valueType: 'number'
                    },
                    {
                        title: '退款',
                        prop: 'returnPrice', valueType: 'number'
                    },
                    {
                        title: '总收入',
                        prop: 'countPrice', valueType: 'number'
                    },
                ]
                th_arr[1].children.push({
                    title: "小计",
                    prop: "paywayPrice", valueType: 'number'
                })
                let tb_arr = res.data.data.map(item => {
                    return {
                        ...item,
                        paywayPrice: Number(item.paywayPrice).toFixed(2),

                        incomePrice: Number(item.incomePrice).toFixed(2) || '0'

                    }
                })
                exportSheetTable({
                    fileName: '商城订单资金日报（商城订单）',
                    tH_data: th_arr,
                    tB_data: tb_arr,
                    isSheet: true,
                    merge: true,
                    mergeProp: []
                })
            }
        } else if (type === 'onlineExportOrder') {
            let res = await apiMallOrderExportOrderDetail({ ...condition })
            if (res.code === 0 && res.data) {
                let th_arr = [
                    {
                        title: '资金日报订单（商城订单）',
                        prop: '',
                        children: [
                            {
                                title: '序号',
                                prop: 'index'
                            },
                            {
                                title: '订单号',
                                prop: 'orderCode'
                            },
                            {
                                title: '订单号(财务)',
                                prop: 'orderCodeFinance'
                            },
                            {
                                title: '用户昵称',
                                prop: 'nickName'
                            },
                            {
                                title: '用户id',
                                prop: 'memberId'
                            },
                            {
                                title: '用户手机号',
                                prop: 'memberMobile'
                            },
                            {
                                title: '注册时间',
                                prop: 'memberCreatedTime'
                            },
                            {
                                title: '商品名称',
                                prop: 'goodsName',
                            },
                            {
                                title: '商品物料ID',
                                prop: 'materialId',
                            },
                            {
                                title: '规格',
                                prop: 'sku',
                            },
                            {
                                title: '商品价格',
                                prop: 'goodsTotalPrice', valueType: 'number'
                            },
                            {
                                title: '订单状态',
                                prop: 'orderState',

                            },
                            {
                                title: "订单类型",
                                prop: "activityTypeCode"
                            },
                            {
                                title: '退款',
                                prop: 'returnPrice', valueType: 'number'
                            },
                            {
                                title: '退款时间',
                                prop: 'refundTime'
                            },
                            {
                                title: '商品数量',
                                prop: 'orderProductCount', valueType: 'number'
                            },
                            {
                                title: '邮费退款',
                                prop: 'returnFreight', valueType: 'number'
                            },
                            {
                                title: '邮费退款时间',
                                prop: 'returnFreightTime',
                            },
                            {
                                title: '付款方式',
                                prop: 'payway'
                            },
                            {
                                title: '订单金额',
                                prop: 'orderTotalPrice1', valueType: 'number'
                            },
                            {
                                title: "优惠券名称",
                                prop: "couponTitle",
                            },
                            {
                                title: "优惠金额",
                                prop: "couponTotal", valueType: 'number'
                            },
                            {
                                title: '付款金额',
                                prop: 'orderPayPrice',
                                valueType: 'number',

                            },
                            {
                                title: '实收金额',
                                prop: 'realityPayPrice',
                                valueType: 'number',
                            },
                            {
                                title: '订单时间',
                                prop: 'createTime'
                            },
                            {
                                title: '发货时间',
                                prop: 'goodsGoTime'
                            },
                            {
                                title: '订单活动',
                                prop: 'isCut'
                            },
                            {
                                title: '邮费',
                                prop: 'freight', valueType: 'number'
                            },
                            {
                                title: '付款时间',
                                prop: 'payTime'
                            },
                            {
                                title: '收货人',
                                prop: 'memberName'
                            },
                            {
                                title: '联系方式',
                                prop: 'memberPhone'
                            },
                            {
                                title: '快递名称',
                                prop: 'courierName'
                            },
                            {
                                title: '收货地址',
                                prop: 'memberAddress'
                            },
                        ]
                    },
                ]
                let tb_arr = []
                res.data.data.forEach(item => {
                    let activityTypeCode
                    switch (parseInt(item.activityTypeCode)) {
                        case 0:
                            activityTypeCode = "普通订单";
                            break;
                        case 1:
                            activityTypeCode = "砍价订单";
                            break;
                        case 2:
                            activityTypeCode = "拼团订单";
                            break;
                        case 3:
                            activityTypeCode = "奖品订单";
                            break;
                        default:
                            break;
                    }
                    item.orderDetails.forEach(item2 => {
                        tb_arr.push({
                            index: item.index,
                            orderCode: item.orderCode || '/',
                            orderCodeFinance: item.orderCode || '/',
                            nickName: item.nickName || '/',
                            memberName: item.memberName || '/',
                            memberId: item.memberId || '/',
                            memberMobile: item.memberMobile || '/',
                            memberCreatedTime: item.memberCreatedTime || '/',
                            goodsName: item2.goodsName || '/',
                            materialId: item2.materialId || '/',
                            sku: item2.sku || '/',
                            goodsTotalPrice: Number(item2.goodsTotalPrice).toFixed(2) || '0',
                            orderProductCount: item2.orderProductCount || '/',
                            payway: item.payway || '/',
                            orderTotalPrice1: Number(item.orderTotalPrice).toFixed(2) || '/',
                            couponTitle: item.couponTitle || '/',
                            couponTotal: Number(item.couponTotal).toFixed(2) || '/',
                            orderPayPrice: Number(item.orderPayPrice).toFixed(2) || '/',
                            platformDiscountPrice: Number(item.platformDiscountPrice).toFixed(2) || '/',
                            orderState: this.getOrderStateTxt(item.orderState, item2.salesStatus),
                            activityTypeCode: activityTypeCode,
                            returnPrice: Number(item2.returnPrice).toFixed(2) || '0',
                            refundTime: item2.refundTime || "/",
                            realityPayPrice: Number(item.realityPayPrice).toFixed(2) || '0',
                            createTime: item.createTime || '/',
                            goodsGoTime: item.goodsGoTime || '/',
                            isCut: item.isCut === 1 ? "砍价活动" : "/",
                            freight: Number(item.freight / 100).toFixed(2) || '0',
                            payTime: item.payTime || '/',
                            memberPhone: item.memberPhone || '/',
                            memberAddress: item.memberAddress || '/',
                            row_bgColor: this.getOrderStateColor(item.orderState, item.isReturn),
                            returnFreight: Number(item.returnFreight / 100).toFixed(2) || "/",
                            returnFreightTime: item.returnFreightTime || "/",
                            courierName: item.courierName
                        })
                    })
                })
                const mergeProp = [
                    { key: 'index' },
                    { key: 'createTime' },
                    { key: 'goodsGoTime' },
                    { key: 'orderTotalPrice1' },
                    { key: 'couponTotal' },
                    { key: 'couponTitle' },
                    { key: 'orderPayPrice' },
                    { key: 'nickName' },
                    { key: 'payway' },
                    { key: 'orderCode' },
                    { key: 'activityTypeCode' },
                    { key: 'realityPayPrice' },
                    { key: 'payTime' },
                    { key: 'memberAddress' },
                    { key: 'memberName' },
                    { key: 'memberPhone' },
                    { key: 'freight' },
                    { key: 'memberId' },
                    { key: 'memberMobile' },
                    { key: 'memberCreatedTime' },
                    { key: 'returnFreight' },
                    { key: 'returnFreightTime' },
                    { key: 'courierName' }
                ]
                exportSheetTable({
                    fileName: '商城资金日报订单（商城订单）',
                    tH_data: th_arr,
                    tB_data: tb_arr,
                    isSheet: true,
                    merge: true,
                    mergeProp
                })
            }
        }

    }

    printQrCode = () => {
        let count = 0
        count = window.prompt('请输入打印数量(1~200之间)：')
        if (!count || count <= 0) return false
        if (!/[0-9]+/.test(count) || count > 200) {
            alert('输入不合法')
            return false
        }
        React.$post('/management/storeInfo/storePrinterName').then(response => {
            const { storeName, QRCodePrinterName } = response.data

            apiIdentificationCodeAdd({ count}).then(res => {
                if (res.code == 0) {
                    const list = res.data
                    printQrCode({ storeName, dataSource: list }, () => {
                        this.setState({
                            isModalVisible: false,
                            printLoading: false
                        })
                    })
                }
            })
            // axios.get(`http://localhost:8888/admin/bill/printCode/${QRCodePrinterName}/${50}/${encodeURIComponent(storeName)}`).then(res => {
            //     if (res.code === 0) {
            //         React.$message({
            //             type: 'info',
            //             content: '打印成功'
            //         })
            //     }
            // })

        }).catch(err => {
            this.setState({
                printLoading: false
            })
        })
        // })

    }
    showModal = () => {
        this.setState({
            isModalVisible: true
        })
    };
    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    };

    getRowClassName(record, index) {
        if (typeof record !== 'object') return
        let flag = record.orderDetailList.filter(item => !['4', '0', null].includes(item.salesStatus))
        return flag.length > 0 ? "warning" : ''
    }

    openVoice = () => {
        this.setState({
            voiceOn: !this.state.voiceOn
        }, () => {
            let noticeTimer
            if (this.state.voiceOn && this.state.orderState == 4) {
                this.getOrderStatistic()
                noticeTimer = setInterval(() => {
                    this.getOrderStatistic()
                }, 10000);
            } else {
                clearInterval(this.state.noticeTimer)
                noticeTimer = null
            }
            this.setState({
                noticeTimer
            })
        })
    }
    billSalePrint = async () => {
        if (this.state.orderList.length === 0) {
            React.$message({
                type: "warning",
                content: '请选择要发货的订单'
            })
            return
        } else {
            let params = {
                orderIds: this.state.orderList.join(','),
            }
            let res = await apiPostMergeOrderDetail(params)
            if (res.code === 0 && res.data) {
                const data = res.data.map(item => {
                    let resultData = [], countTotal = 0, payTotal = 0
                    item.orderDetailList.forEach((row, index) => {
                        row.sort = index + 1
                        countTotal += row.orderProductCount
                        payTotal += Number(row.orderPriceTotal) ? Number(row.orderPriceTotal) : 0
                        row.orderPriceTotal = (row.orderPriceTotal / 100).toFixed(2)
                        const goodsSkuJson = row.goodsSkuJson ? JSON.parse(row.goodsSkuJson) : {}
                        row.skuStr = goodsSkuJson.skuAttribute.map(sku => {
                            return sku.key + ':' + sku.value
                        }).join(';')
                        row.libraryName = item.libraryName
                        row.orderPrice = (row.orderPrice / 100).toFixed(2)
                        resultData.push(row)
                        if (index === item.orderDetailList.length - 1) {
                            resultData.push({
                                materialId: '合计',
                                orderProductCount: countTotal,
                                orderPriceTotal: payTotal ? (payTotal / 100).toFixed(2) : '0'
                            })
                        }
                    })
                    return {
                        th: [
                            { label: '序号', value: 'sort', width: '4%' },
                            { label: '物料编码', value: 'materialId', width: '15%' },
                            { label: '物料名称', value: 'materialName', width: '30%', align: 'start' },
                            { label: '规格型号', value: 'skuStr', width: '9%' },
                            { label: '数量', value: 'orderProductCount', width: '4%' },
                            { label: '单价', value: 'orderPrice', width: '7%' },
                            { label: '金额', value: 'orderPriceTotal', width: '7%' },
                            { label: '仓库', value: 'libraryName', width: '7%' },
                            { label: '备注', value: 'skuDescription', width: '17%' },
                        ],
                        title: item.libraryName + '出库单',
                        infos: [
                            { label: '仓库名称', value: item.libraryName },
                            { label: '出库时间', value: item.outLibraryTime },
                            { label: '出库单号', value: item.code },
                            { label: '对应单号', value: item.orderCode },
                            { label: '快递公司', value: res.data.courierName },
                            {
                                label: res.data.courierNo ? '快递单号' : '配送员',
                                value: item.courierNo ?? item.deliverymanName
                            },
                            { label: '付款时间', value: item.payTime },
                            // { label: '备注', value: item.remark }
                        ],
                        data: resultData,
                        remark: item.remark ?? '',
                        tfoot: {
                            '配货时间': '',
                            '发货人': '',
                            '复核人': '',
                            '审核人': '',
                        }
                    }
                })

                toPrintTool(data)
                return
                mergePrints(data, true)
            }
        }

    }
    courierChange = (e) => {
        // console.log(e)
        if (e === "HQM") {
            this.setState({
                off: "2"
            })
        } else {
            this.setState({
                off: "1"
            })
        }
    }

    render() {
        const {
            columns,
            tabData,
            dataSource,
            voiceOn,
            loading,
            visible,
            options,
            logVisible,
            searchValue,
            viewLoading,
            logisticsInformation,
            isModalVisible,
            orderState,
            courierCode,
            courierNo,
            mergeVisible,
            mergeOrder,
            mergeOrderDataSource,
            mergeColumns,
            selectedRowKeys,
            selectedRows,
            OrderVisible,
            orderDetails,
            tabDataNew,
            courierOptions,
            off,
            printLoading
        } = this.state
        const rowSelection = {
            selectedRowKeys,
            fixed: true,
            onChange: this.onChange,
        }
        return (
            <div className='p-layout-box'>
                {
                    orderState == 4 && <Affix style={{ position: 'absolute', top: 20, right: 160 }}>
                        <Button type="primary" onClick={this.openVoice}>
                            {
                                voiceOn ? '关闭语音提醒' : '开启语音提醒'
                            }
                        </Button>
                    </Affix>
                }
                {/* <Button onClick={this.showModal}>打印二维码</Button> */}
                {/* <Modal title="打印二维码" visible={isModalVisible} onOk={this.printQrCode} confirmLoading={printLoading} onCancel={this.handleCancel}>
                    <p>即将打印50张二维码</p>
                </Modal> */}
                <SearchHeader searchValue={searchValue} getValue={this.getValue}
                    educeTable={this.educeTable} orderState={orderState}
                    capitalTable={this.capitalTable} />
                <Tabs activeKey={orderState} onChange={this.changeKey}
                >
                    {
                        tabData.map(v => {
                            return <TabPane key={v.key} tab={v.tab}>
                                <div className="p-layout-content-pagination">
                                    {/* <ReactAudioPlayer
                    src={sounds}
                    autoPlay={true}
                    ref={(ref) => this.audioRef = ref}
                  /> */}
                                    {/* <iframe src='@/assets/audio/newOrderMP3.mp3' allow="autoplay" style={{display:'none'}} ></iframe> */}
                                    <TheTable loading={loading} scroll={{ x: 'max-content', y: '54vh' }} columns={columns}
                                        dataSource={dataSource} rowClassName={this.getRowClassName}
                                        showTools={true} />
                                    <ThePagination
                                        pageNo={this.state[`pageData${v.key}`].pageNo}
                                        pageSize={this.state[`pageData${v.key}`].pageSize}
                                        total={this.state[`total${v.key}`]}
                                        pageChange={this.pageChange}
                                    />
                                </div>
                            </TabPane>
                        })
                    }
                </Tabs>


                <TheDialog
                    visible={mergeVisible}
                    title={<div className='mergeTitle'>选择收货人多个待发货订单，合并发货</div>}
                    width={'90%'}
                    handleCancel={this.mergeCloseDialog}
                    footer={null}
                >
                    <div className='msgTitle'>
                        收货人信息
                        <Button
                            style={{ marginRight: 12, float: 'right' }}
                            type="default"
                            onClick={this.billSalePrint}>
                            出库单打印
                        </Button>
                    </div>
                    <div className='msgContent'>
                        <>
                            {/* <Row>
                <Col span={3}>
                  <div>
                    用户昵称
                  </div>
                </Col>
                <Col span={20}>
                  {mergeOrder.buyMemberName}
                </Col>
              </Row> */}
                            <Row>
                                <Col span={3}>
                                    <div>
                                        收货人
                                    </div>
                                </Col>
                                <Col span={20}>
                                    {mergeOrder.memberName}
                                </Col>
                            </Row>
                            <Row>
                                <Col span={3}>
                                    <div>
                                        联系方式
                                    </div>
                                </Col>
                                <Col span={20}>
                                    {mergeOrder.memberPhone}
                                </Col>
                            </Row>
                            <Row>
                                <Col span={3}>
                                    <div>
                                        收货地址
                                    </div>
                                </Col>
                                <Col span={20}>
                                    {mergeOrder.memberAddress}
                                </Col>
                            </Row>
                        </>
                    </div>
                    <div className='msgTitle'>
                        待发货订单
                    </div>
                    <div className='readyOrder'>
                        <Row>
                            <Col span={12}>
                                <div style={{ outline: "1px solid gainsboro" }}>
                                    <div className='ordertitle'>
                                        <div style={{
                                            outline: "1px solid gainsboro",
                                            height: "40px",
                                            lineHeight: "40px",
                                            textIndent: "24px"
                                        }}>
                                            待发订单
                                        </div>
                                    </div>
                                    <div className='orderlist'>
                                        <TheTable
                                            scroll={{ x: 'max-content', y: 215 }}
                                            columns={mergeColumns}
                                            dataSource={mergeOrderDataSource}
                                            rowKey={record => record.shopOrderId}
                                            rowSelection={rowSelection}
                                        />
                                    </div>
                                </div>
                            </Col>
                            <Col span={12}>
                                <div>
                                    <div className='ordertitle'>
                                        <div style={{
                                            outline: "1px solid gainsboro",
                                            height: "40px",
                                            lineHeight: "40px",
                                            textIndent: "24px"
                                        }}>
                                            已选择的订单
                                        </div>
                                    </div>
                                    <div className='orderlist' style={{ overflowY: "scroll" }}>
                                        <div style={{ padding: "10px", width: "100%", height: "270px" }}>
                                            <List
                                                dataSource={selectedRows}
                                                itemLayout="horizontal"
                                                renderItem={(item) => (
                                                    <List.Item>
                                                        <Col span={8}>
                                                            订单编号 {item.orderCode}
                                                        </Col>
                                                        {/* <Col span={15}>
                              商品名称  {item.orderDetailList[0].goodsName}
                            </Col> */}
                                                        <div onClick={() => this.CancelChange(item.shopOrderId, item)}>
                                                            <CloseOutlined
                                                                style={{ fontSize: "20px", color: "red" }}
                                                            />
                                                        </div>
                                                    </List.Item>)
                                                }
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    <div className='msgTitle'>
                        快递信息
                    </div>
                    <div className='msgContent'>
                        <Form
                            ref={this.mergeformRef}
                            labelAlign="left"
                            labelCol={{ span: 2 }}
                            wrapperCol={{ span: 4 }}
                        >
                            <Form.Item label="快递公司" name="courierCode" rules={[{ required: true }]}>
                                <Select allowClear
                                    options={
                                        options.filter((v) => {
                                            return v.value !== 'HQM'
                                        })
                                    }
                                    showSearch
                                    filterOption={(input, option) => {
                                        return option.label.toUpperCase().includes(input.toUpperCase())
                                    }
                                    }
                                    onChange={this.courierChange}
                                    placeholder='请选择快递公司' />
                            </Form.Item>
                            {off === '1' ? <Form.Item label="单号" name="courierNo" rules={[{ required: true }]}>
                                <Input placeholder='请输入单号' />
                            </Form.Item> : []}
                            {off === '2' ? <Form.Item label="配送员" name="courier" rules={[{ required: true }]}>
                                <Select allowClear
                                    options={courierOptions}
                                    showSearch
                                    filterOption={(input, option) => {
                                        return option.label.toUpperCase().includes(input.toUpperCase())
                                    }}
                                    // onChange={this.courierManChange}
                                    placeholder='请选择配送员' />
                            </Form.Item> : []}
                        </Form>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10, marginBottom: 20 }}>
                        <Space>
                            <Button onClick={this.mergeCloseDialog}>取消</Button>
                            <Button type="primary" onClick={this.mergeSaveDialog}>合并发货</Button>
                        </Space>
                    </div>
                </TheDialog>
                <TheDialog visible={OrderVisible}
                    title={<div className='mergeTitle'>订单详情</div>}
                    width={'60%'}
                    handleCancel={this.orderCloseDialog}
                    footer={null}>
                    <List
                        dataSource={orderDetails}
                        itemLayout="horizontal"
                        renderItem={(item) => (
                            <List.Item>
                                <Col span={6}>
                                    商品名称：{item.goodsName}
                                </Col>
                                <Col span={4}>
                                    <TheImage src={item.goodsImage} width={80} height={80} />
                                </Col>
                                {/* <Col span={6}>
                  商品物料名称：{item.materialName}
                </Col> */}
                                <Col span={4}>
                                    物料ID：{item.materialId}
                                </Col>
                                <Col span={2}>
                                    单价：<React.$Price price={item.orderPrice} />
                                </Col>
                                <Col span={2}>
                                    数量：{item.orderProductCount}
                                </Col>
                            </List.Item>)
                        }
                    />
                </TheDialog>
                <Logistics options={options} ref={this.logisticsRef}></Logistics>
                <SendGoods options={options} courierOptions={courierOptions} ref={this.sendGoodsRef}
                    refresh={() => this.getData()} history={this.props.history}></SendGoods>
            </div>
        )
    }
}
